<template>
  <el-row class="risk-events" style="width:100%">
    <el-col :sm="24" :md="24" :lg="24">
      <div class="risk-event-title">
        <div class="r-title">{{info.curIndustryName}}</div>
      </div>
      <div class="content-down">
        <el-col :sm="24" :md="12" :lg="12" class="risk-internet">
          <div class="risk-event-items border-right">
            <div style="margin-bottom:20px;"></div>
            <div style="margin-left: 35px;color: #8c8c8c;">行业涨跌幅</div>
            <div class="increase">
              {{info.curRate}}%
              <i :class="info.isPositive?'icon-increase-up':'icon-increase-down'"></i>
            </div>
            <el-col :span="24">
              <!-- <div ref="chart2" style="width: 98%;height:350%;"></div> -->
			    <div ref="chart2" style="width:600px;height:350%;"></div> 
            </el-col>
          </div>
        </el-col>
        <!-- K 线图 -->
        <el-col :sm="24" :md="12" :lg="12" class="risk-event-panel">
          <div class="risk-event-items">
            <div style="margin-bottom:20px;"></div>
            <div style="margin-left:35px;color: #999999;">标杆上市企业</div>
            <el-col :span="24">
              <!-- <div ref="chart" style="width: 98%;height:350%;"></div> -->
			   <div ref="chart" style="width:600px;height:350%;"></div> 
            </el-col>
          </div>
        </el-col>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import echarts from 'echarts'


export default {
  components: {

  },
  props: {
    info: {},
    eventChart1: {},
    eventChart2: {}
  },
  data () {
    return {
      chart: {},
      chart2: {}
    }
  },
  // 创建Echarts图表
  mounted () {
    this.$nextTick(() => {
      this.createChart()
    })
  },
  // 具体图表内容信息
  methods: {
    toThousands (num) {
      return (num || 0).toString().replace(/\d+/, function (n) {
        let len = n.length
        if (len % 3 === 0) {
          return n.replace(/(\d{3})/g, ',$1').slice(1)
        } else {
          return n.slice(0, len % 3) + n.slice(len % 3).replace(/(\d{3})/g, ',$1')
        }
      })
    },
    createChart () {
      var that = this
      this.chart = echarts.init(this.$refs.chart)
      let colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
      let labelFont = 'bold 12px Sans-serif'

      function calculateMA (dayCount, data) {
        let result = []
        for (let i = 0, len = data.length; i < len; i++) {
          if (i < dayCount) {
            result.push('-')
            continue
          }
          let sum = 0
          for (let j = 0; j < dayCount; j++) {
            sum += data[i - j][1]
          }
          result.push((sum / dayCount).toFixed(2))
        }
        return result
      }
      let dates = that.eventChart1.dates
      let data = that.eventChart1.data
      let volumes = that.eventChart1.volumes

      let dataMA5 = calculateMA(5, data)
      let dataMA10 = calculateMA(10, data)
      let dataMA20 = calculateMA(20, data)

      const option = {
        animation: false,
        color: colorList,
        title: {
          text: this.info.curCompanyName,
          textStyle: {
            fontWeight: 400,
            fontSize: 18
          },
          left: 30
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          width: '100',
          formatter: function (value) {
            console.log(value)
            let format
            format = value[0].axisValue + '<br/>' + '开盘：' + that.toThousands(value[0].data[1]) + '<br/>' + '收盘：' + that.toThousands(value[0].data[2]) + '<br/>' +
              '最低：' + that.toThousands(value[0].data[3]) + '<br/>' + '最高：' + that.toThousands(value[0].data[4]) + '<br/>' + '涨跌幅：' + value[0].data[6] + '%' + '<br/>'
            // +value[4].seriesName+'：' + value[4].data+'<br/>'
            return format
          },
          padding: [15, 15, 15, 15],
          textStyle: {

          }
        },
        axisPointer: {
          link: [{
            xAxisIndex: [0, 1]
          }]
        },

        xAxis: [{
          type: 'category',
          show: false,
          data: dates,
          boundaryGap: ['20%', '20%'],
          axisLine: {lineStyle: {color: '#f0f0f0'}},
          axisLabel: {
            formatter: function (value) {
              return echarts.format.formatTime('MM-dd', value)
            }
          },
          min: 'dataMin',
          max: 'dataMax',
          axisPointer: {
            show: true
          }
        }, {
          type: 'category',
          gridIndex: 1,
          data: dates,
          scale: true,
          boundaryGap: ['20%', '20%'],
          splitLine: {show: false},
          axisLabel: {show: false},
          axisTick: {show: false},
          axisLine: {show: false},
          splitNumber: 20,
          min: 'dataMin',
          max: 'dataMax',
          axisPointer: {
            type: 'shadow',
            label: {show: false},
            triggerTooltip: true
          }
        }],
        yAxis: [{
          scale: true,
          splitNumber: 2,
          axisLine: {show: false},
          position: 'left',
          splitLine: {show: false},
          axisTick: {show: false},
          axisLabel: {
            inside: false,
            formatter: function (value, index) {
              return parseFloat(value).toFixed(1) + '\n'
            }
          }

        }, {
          name: '成交量',
          nameLocation: 'end',
          nameTextStyle: {
            padding: [0, 0, 10, 40]
          },
          scale: true,
          gridIndex: 1,
          splitNumber: 4,
          position: 'right',
          axisLine: {lineStyle: {color: '#34a9ff'}},
          axisTick: {show: false},
          splitLine: {show: true},
          axisLabel: {
            inside: false,
            formatter: '{value}\n'
          }
        }],
        grid: [{
          left: 80,
          right: 50,
          bottom: 20,
          top: 50,
          z: 2
        }, {
          left: 80,
          right: 50,
          top: 50,
          bottom: 20,
          z: 0
        }],
        graphic: [{
          type: 'group',
          left: 'center',
          top: 70,
          width: 300,
          bounding: 'raw',
          children: [{
            id: 'MA5',
            type: 'text',
            style: {fill: colorList[1], font: labelFont},
            left: 0
          }, {
            id: 'MA10',
            type: 'text',
            style: {fill: colorList[2], font: labelFont},
            left: 'center'
          }, {
            id: 'MA20',
            type: 'text',
            style: {fill: colorList[3], font: labelFont},
            right: 0
          }]
        }],
        series: [{
          type: 'candlestick',
          name: '日K',
          data: data,
          itemStyle: {
            normal: {
              color: '#ff6960',
              color0: '#00bd9a',
              borderColor: '#ff6960',
              borderColor0: '#00bd9a'
            },
            emphasis: {
              color: 'black',
              color0: '#444',
              borderColor: 'black',
              borderColor0: '#444'
            }
          }
        }, {
          name: 'MA5',
          type: 'line',
          data: dataMA5,
          smooth: true,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          }
        }, {
          name: 'MA10',
          type: 'line',
          data: dataMA10,
          smooth: true,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          }
        }, {
          name: 'MA20',
          type: 'line',
          data: dataMA20,
          smooth: true,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          }
        },
        {
          name: '成交量',
          type: 'bar',
          xAxisIndex: 1,
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: '#ededf4'
            },
            emphasis: {
              color: '#140'
            }
          },
          data: volumes
        }]
      }

      this.chart.setOption(option)
      this.chart2 = echarts.init(this.$refs.chart2)
      const option2 = {
        xAxis: {
          type: 'category',
          show: true,
          axisLine: {
            lineStyle: {color: '#8c8c8c'}
          },
          axisLabel: {
            margin: 12
          },
          data: this.info.eventDates,
          boundaryGap: false
        },
        yAxis: {
          show: true,
          name: '当前价(元)',
          nameLocation: 'end',
          nameTextStyle: {
            padding: [0, 0, 10, 40]
          },
          position: 'right',
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {color: '#8C8C8C'}
          },
          axisLabel: {
            margin: 12
          },
          type: 'value'
        },
        grid: [{
          left: 45,
          right: 65,
          top: 70,
          bottom: 30
        }],
        series: [{
          data: this.eventChart2,
          type: 'line',
          smooth: true,
          symbol: false,
          width: '100%',
          itemStyle: {
            normal: {
              color: 'transparent'
            }
          },
          lineStyle: {
            normal: {
              color: 'transparent'
            }
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0, color: this.info.isPositive ? '#fe5196' : '#d4fc79' // 0% 处的颜色  涨幅上升颜色 #fe5196 - #f77062
              }, {
                offset: 1, color: this.info.isPositive ? '#f77062' : '#96e6a1' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        }]
      }
      this.chart2.setOption(option2)
      window.removeEventListener('resize', this.resizeChart)
      window.addEventListener('resize', this.resizeChart)
    },
    resizeChart () {
      if (this.chart) {
        this.chart.resize()
      }
      if (this.chart2) {
        this.chart2.resize()
      }
    }
  },
  watch: {
    eventChart2: function () {
      this.createChart()
    }
  },
  // 销毁参数
  destroyed () {
    this.chart = null
    this.chart2 = null
  }
}
</script>
<style scoped>
  .risk-events {
    min-width:1070px;
	width:50%;
  }

  .risk-internet {
    display: flex;
    flex-direction: column;
    height: 392px;
  }

  .risk-event-panel {
    display: flex;
    flex-direction: column;
    height: 392px;
  }

  .risk-event-title {
    display: flex;
    align-items: center;
    height: 65px;
    border-bottom: 2px solid #ececec;

   
  }

  .risk-event-title .r-title {
      flex: 1;
      color: #222222;
      font-size: 16px;
      margin-left: 35px;
    }

   .risk-event-title  .r-count {
      font-weight: bold;
      font-size: 48px;
      color: #ce2731;
      margin-right: 20px;
    }

  .risk-event-items {
    flex: 1;
    /*overflow: auto;*/
  }

  .risk-event-item {
    display: flex;
    align-items: center;
    margin: 0 20px;
    padding: 15px 0;
  }

  .event-info {
    flex: 1;
    color: #222222;
    font-size: 15px;
    line-height: 25px;
  }

  .link-event-detail {
    text-decoration: none;
    color: #ffffff;
    background-color: #ce2731;
    border-radius: 15px;
    padding: 8px 15px;
    font-size: 12px;
  }

  .dialog-detail .el-input {
    width: 300px;
  }

  .increase {
    font-size:30px;
    font-weight:200;
    margin:10px 35px 5px;
    position:absolute;
    color:#474747
  }

  .border-right {
    position:relative
  }

  .border-right:after {
    content:'';
    width:1px;
    height:87%;
    background:#ebebeb;
    position:absolute;
    bottom:25px;
    right:0
  }


</style>



